import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { stepDescriptionDefaultProps } from './defaultProps';
import type { StepDescriptionOptions } from './type';

export interface StepDescriptionProps extends StepDescriptionOptions, HTMLAttributes<HTMLDivElement> {}

const StepDescription: FC<StepDescriptionProps> = (props) => {
  const { className, children, forwardedRef, ...stepDescriptionProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('description', className), ...stepDescriptionProps },
    children,
  );
};

StepDescription.displayName = 'StepDescription';
StepDescription.defaultProps = stepDescriptionDefaultProps;

export default StepDescription;
